/**
 * canvas粒子效果
 */
//调用
CanvasParticle({
    vx: 4, //小球x轴速度,正为右，负为左
    vy: 4, //小球y轴速度
    height: 2, //小球高宽，其实为正方形，所以不宜太大
    width: 2,
    count: 200, //点个数
    // color: "121, 162, 185", 	//点颜色
    color: "200,193,193", //点颜色
    // stroke: "130,255,255", 		//线条颜色
    // stroke: "240,250,228", 		//线条颜色
    stroke: "0,0,0", //线条颜色
    dist: 6000, //点吸附距离
    e_dist: 20000, //鼠标吸附加速距离
    max_conn: 10 //点到点最大连接数
});

// 鼠标移入事件
$('.first').addEventListener('mouseover', function() {
    // console.log(1);
    $('.qrcode-box').style.height = '150px';
})

//鼠标移出事件
$('.first').addEventListener('mouseout', function() {
    // console.log(1);
    $('.qrcode-box').style.height = '0px';
})

/**
 * // 价格模拟服务器的数据
 */
let data = [
    { "count": 4000, "price": 1200, "unitPrice": "0.3000" },
    { "count": 8000, "price": 2000, "unitPrice": "0.2500" },
    { "count": 40000, "price": 8000, "unitPrice": "0.2000" }
]

//定义html代码片段
let dataHtml = '';

//组装数据
data.forEach(function(v, i) {
    dataHtml += `
        <li class="${i===0 ? 'active': ''}"  data-price="${v.price}" data-unit-price="${v.unitPrice}">${v.count}次</li>
    `
})

//渲染到页面中
$('.pricelist').innerHTML = dataHtml


/**
 * 切换次数
 */
$('.pricelist').addEventListener('click', function(e) {
    if (e.target.nodeName === 'LI') {

        [...$('.pricelist').children].forEach(function(v) {
            v.classList.remove('active');
        });
        e.target.classList.add('active')
    }
})


//tab选项卡
//获取元素
let li = $a('.pricelist li');
let p = $a('.price-box p');


li.forEach(function(value, index) {
    //事件注册
    value.addEventListener('click', function() {
        // console.log(1);
        //先清除之前的内容 -- 遍历
        li.forEach(function(v, i) {
            v.className = '';
            p[i].className = '';
        })

        //给当前菜单添加类名
        this.className = 'active';

        //显示当前菜单对应的内容 -- 通过索引
        p[index].className = 'on';
    })
})


//tab选项卡
//获取元素
let li1 = $a('.api-content li');
let api_item = $a('.tab-content .tabCont-item');

//定义一个变量，用来保存上一个菜单的索引
let index = 0;

//遍历菜单
li1.forEach(function(v, i) {
    //事件注册 鼠标移入事件
    v.addEventListener('click', function() {
        //清除原来列表的类名
        li1[index].classList.remove('active');

        //给当前列表添加类名
        this.classList.add('active');

        //清除以前内容的类名
        api_item[index].classList.remove('current');

        //给当前列表对应的内容添加类名current
        api_item[i].classList.add('current');

        //将当前列表的索引i赋值给index
        index = i;
    })
})